
<!doctype html>
<html lang="en">
<head>
	<meta charset="UTF-8" />
	<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
	<title>银行卡</title>
	<link rel="stylesheet" type="text/css" href="../../build/css/base.css"/>
	<link rel="stylesheet" type="text/css" href="../../build/css/main.css">
	<script src="../../build/js/jquery.min.js"></script>
	<script src="../../build/public/vue.js" charset="utf-8"></script>
	<script src="../../build/public/vue-resource.js" charset="utf-8"></script>
	<script src="../../build/js/config.js"></script>
	<script src="../../build/js/common.js"></script>
	<script src="../../build/js/global.js"></script>
	<style type="text/css">
		
		/*案列css*/
		.index-bar{position: fixed;right: 0;width: 28px;top: 50%;z-index: 300;}
		.index-bar>a{display: block;width: 28px;text-align: center;font-size: 14px;margin-bottom:5px;}
		.index-bar>a:last-child{
			margin-bottom:0;
		}
		.index-bar>a:active{color: #00C77E;}
		.index-list>.section>span{display: block;padding:6px 20px;}
		.index-list>.section>a{display: block;width: 100%;padding: 12px 20px;background: #FFF;border-bottom: 1px solid #EFEFEF;box-sizing: border-box;}
		.index-list>.section>a:active{background: #EFEFEF;}
		.indexTip{
		    font-size: 28px;
		    font-weight: bold;
		    width: 70px;
		    height: 70px;
		    line-height: 70px;
		    border-radius: 50%;
		    background: rgba(0,0,0,.5);
		    position: fixed;
		    bottom: 120px;
		    right: 100px;
		    text-align: center;
		    display: none;
		    color: #FFF;
		}
	</style>
</head>
<body>
	<div class="me-header" id="container">		
		<!-- <div class="me-header-title">
			<a href="../index.html">
				<div class="me-header-icon ripple"><span class="iconfont">&#xea63;</span></div>
				选择银行	
			</a>	
		</div>
		<div class="me-header-tool">			
			<div class="me-header-tool-icon iconfont ripple">
				&#xea6f;
			</div>
		</div> -->
	</div>
	<div class="me-content">
		<div class="index-list"></div>
	</div>
<script type="text/javascript">
	var vm = new Vue({
	el:"#container",
			data:{
				wallets:[],
			},
			mounted:function(){
				this.$nextTick(function(){
					var creatIndexDom = function(){
						noParamsGet('/advisor/financial-advisor/bank-list',function(res){
							var resultData = res.data;
							//筛选出数组的字母
							var letterGroup = []
							resultData.forEach(function(bankData){
								var letter =  bankData.initial;
								letterGroup.push(letter)
							})				
							var letterFinal = unique(letterGroup.sort());
							
							//创建索引Bar
							var indexBar = document.createElement('div');
							indexBar.className = 'index-bar';
							document.body.appendChild(indexBar);
							var screenHeight = document.documentElement.clientHeight;
							if(screenHeight > 700) screenHeight =700;
							var indexListHeight = Math.ceil((screenHeight - (screenHeight/10))/27);
							letterFinal.forEach(function(item){
								var indexList = document.createElement('a');
								indexList.title = item+'_section';
								indexList.innerHTML = item;
								indexList.style.cssText = 'height:'+indexListHeight+'px;line-height:'+indexListHeight+'px';
								indexBar.appendChild(indexList);
								//设置indexBar高度			
							});
							var indexBarHeight = indexBar.offsetHeight;
							indexBar.style.cssText = "margin-top:-"+(indexBarHeight/2)+"px";
							//添加监听滑动事件
							addIndexEvent(indexBar);
							
							//创建列表数据
							letterFinal.forEach(function(letterData){
								//创建列表
								var section = document.createElement('div');
								var sectionTitle = document.createElement('span');
								var sectionClassName = letterData+'_section';
								section.className = 'section';
								section.classList.add(sectionClassName);
								sectionTitle.innerHTML = letterData;
								section.appendChild(sectionTitle);
								document.querySelector('.index-list').appendChild(section);
							});
							//创建指示图
							var indexTip = document.createElement('span');
							indexTip.className = 'indexTip';
							document.body.appendChild(indexTip);
							//渲染列表内数据列表
							resultData.forEach(function(bankData){
								var sectionName = '.'+bankData.initial+'_section';
								section = document.querySelector(sectionName);
								var selectList = document.createElement('a');
								selectList.title = bankData.idStr;
								selectList.innerHTML = bankData.name;
								section.appendChild(selectList);
								selectList.addEventListener('click',function(){
									window.localStorage.setItem('bankIdstr',selectList.title);
									window.localStorage.setItem('bankName',selectList.innerHTML);
									history.go(-1);
								},false)		
							})
						})	
					}
					var addIndexEvent = function(indexBar){
						indexBar.addEventListener('touchstart',slideMove,false);
						indexBar.addEventListener('touchmove',slideMove,false);
						indexBar.addEventListener('touchend',slideMove,false);
						function slideMove(e){					
							switch(e.type){
								case 'touchstart':					
									e.preventDefault();
									hrefFloor(getFloor(e,indexBar));
									break;
								case 'touchmove':
									e.preventDefault();
									hrefFloor(getFloor(e,indexBar,-1));
									showIndexTip(getFloor(e,indexBar),'show');
									
									break;
								case 'touchend':
									setTimeout(function(){
										showIndexTip('hide');	
									},1000)
												
									break;				
							}
						}
					}
					//数组去重
					function unique(data){
						var res = [];
						var json = {};
						for(var i = 0; i < data.length; i++){
							if(!json[data[i]]){
								res.push(data[i]);
								json[data[i]] = 1;
							}
						}
						return res;
					}
					//获取楼层
					function getFloor(e,indexBar){
						
						var indexBarHeight = indexBar.offsetTop;
						var indexList = indexBar.childNodes;
						var indexListHeight = indexBar.childNodes[0].scrollHeight;
						var moveX = e.touches[0].clientY - indexBarHeight;
						var floor = Math.floor(moveX/indexListHeight);
						
						return indexList[floor].innerHTML;
					}
					//楼层跳转
					function hrefFloor(hrefName){
						var hrefName = '.'+hrefName+'_section';
						
						var item = document.querySelector(hrefName);
						var hrefHeight = item.offsetTop -50;
						document.body.scrollTop = hrefHeight;		
					}
					//显示楼层索引表示
					function showIndexTip(text ,type){
						var indexTip = document.querySelector('.indexTip');
						if(arguments.length == 1){
							indexTip.style.display = 'none';
						}else{
							if(type == 'show'){
								indexTip.innerHTML = text;
								indexTip.style.display = 'block';
							}			
						}
						

						
					}
					
					!function(){
						new creatIndexDom();		
					}()
				})
			}
});	
	

	
</script>

	<script>
	</script>
</body>
</html>